<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>轩昊科技</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="machine-dynamic-rate">
      <div>
        <el-form :model="search" label-width="80px" :inline="true">
          <el-form-item label="部门-车间">
            <el-cascader :options="deps" v-model="search.depWork" :props="{children:'workshops'}" separator="-" :filterable="true"></el-cascader>
          </el-form-item>
          <el-form-item label="采集时间">
            <el-date-picker v-model="search.startTime" type="datetime" :editable="false" format="yyyy-MM-dd HH" value-format="timestamp"
              style="width:160px;" popper-class="timePopper"></el-date-picker>
            -
            <el-date-picker v-model="search.endTime" type="datetime" :editable="false" format="yyyy-MM-dd HH" value-format="timestamp"
              style="width:160px;" popper-class="timePopper"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="setDynamics(true)">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <machine-dynamic-table class="machine-dynamic-table" :class="{'hasData':pagination.totalCount!==0}" :dynamics="dynamics"
        :has-scroll="true"></machine-dynamic-table>
      <div style="margin-top:10px;text-align:right;" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
    </div>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "../base.css"
  ]);
</script>
<script src="../utils/moduleUtil.js"></script>
<script src="../components/machineDynamicTable.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      var search = {
        depWork: [''],
        startTime: null,
        endTime: null
      };
      return {
        loading: false,
        deps: [],
        dynamics: [],
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 10
        }
      };
    },
    created: function () {
      this.getDepartment();
      this.setDynamics(true);
    },
    methods: {
      getDepartment: function () {
        var self = this;
        this.loading = true;
        return ModuleUtil.getDepAndWorkShop(true).then(function (deps) {
          self.loading = false;
          self.deps = deps;
          return deps;
        }).catch(function () {
          self.loading = false;
        });
      },

      setDynamics: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var search = this.search;
        if (!this.checkSearchTime(search)) {
          return;
        }

        if (isSearch) {
          this.pagination.currentPage = 1;
        }

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize
        };

        var depWork = search.depWork;
        if (depWork[0] !== undefined && depWork[0] !== '') {
          postData.departmentId = depWork[0];
        }

        if (depWork[1] !== undefined && depWork[1] !== '') {
          postData.workShopId = depWork[1];
        }

        var startTime = search.startTime;
        if (startTime !== null) {
          postData.startTime = moment(startTime).startOf('hour').valueOf();
        }

        var endTime = search.endTime;
        if (endTime !== null) {
          postData.endTime = moment(endTime).endOf('hour').valueOf();
        }
        this.loading = true;
        var self = this;
        ajaxRequest('equipment/getEquipmentCropMobility', postData).then(function (res) {
          var searchDay=NaN;
          if(startTime !== null && endTime !== null){
            searchDay= moment(postData.endTime).diff(moment(postData.startTime),'day');
          }
         
          self.loading = false;
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var dynamics = res.returnData;
          for (var i = 0; i < dynamics.length; i++) {
            var dynamic = dynamics[i];
            var timeField = ['machingTime', 'offTime', 'waitTime'];
            SysUtil.formatString2Number(dynamic, timeField);

            var usedRate;
            var machingTime = dynamic.machingTime;
            dynamic.dayMeanTime=machingTime / (searchDay+1);
            if (machingTime === '') {
              usedRate = '';
            } else {
              var totalTime = _.sumBy(timeField, function (field) {
                var value = dynamic[field];
                if (value === '') {
                  return 0;
                }
                return value;
              });
              if (totalTime === 0) {
                usedRate = '';
              } else {
                usedRate = _.round(machingTime / totalTime * 100, 2);
              }
            }
            dynamic.usedRate = usedRate;

            var qualifiedRate;
            var machingCount = dynamic.machingCount;
            if (machingCount === null) {
              machingCount = 0;
            }
            if (machingCount === 0) {
              qualifiedRate = '';
            } else {
              var unqualifiedCount = dynamic.unqualifiedCount;
              if (unqualifiedCount === null) {
                unqualifiedCount = 0;
              }
              qualifiedRate = _.round((machingCount - unqualifiedCount) / machingCount * 100, 2);
            }
            dynamic.qualifiedRate = qualifiedRate;
          }
          self.dynamics = dynamics;

          self.pagination.totalCount = res.iTotalRecords;
        }).catch(function () {
          self.loading = false;
        });
      },

      checkSearchTime: function (search) {
        var startTime = search.startTime;
        var endTime = search.endTime;
        if (startTime !== null && endTime !== null) {
          if (moment(startTime).isAfter(endTime, 'hour')) {
            this.$alert('采集时间的开始时间不能晚于结束时间', '信息');
            return false;
          }
        }
        return true;
      },

      pageChange: function () {
        this.setDynamics();
      }
    },
    components: {
      MachineDynamicTable: MachineDynamicTable
    }
  });
</script>
<style>
  .machine-dynamic-rate {
    padding: 20px;
    height: calc(100% - 40px);
  }

  .machine-dynamic-rate .machine-dynamic-table{
    height: calc(100% - 62px);
    overflow: auto;
  }

  .machine-dynamic-rate .machine-dynamic-table.hasData{
    height: calc(100% - 104px);
  }

  .timePopper .el-time-panel {
    width: 125px;
  }

  .timePopper .el-time-panel .el-time-spinner .el-time-spinner__wrapper:nth-child(2) {
    display: none;
  }
</style>

</html>